<template>
  <div>
    <el-form ref="ruleForm" :model="form" style="margin: 20px">
      <!-- 顶部 -->
      <el-form-item>
        <el-row>
          <el-col :span="3.5">
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入用户名"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3.5">
            <el-input
              v-model="ruleForm.id"
              placeholder="请输入用户Id"
              clearable
            ></el-input>
          </el-col>
          <el-col :span="3.5">
            <el-input
              v-model="ruleForm.mobile"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-col>
          <el-button type="primary" icon="el-icon-search" @click="find"
            >查找</el-button
          >

          <el-button
            type="primary"
            icon="el-icon-download"
            @click="handleDownload"
            >导出</el-button
          >
        </el-row>
      </el-form-item>
      <!-- 列表 -->
      <el-table :data="tableData" border style="width: 100%" class="tables">
        <el-table-column prop="id" label="用户Id" sortable width="100">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="170">
        </el-table-column>
        <el-table-column prop="avatar" label="用户头像" width="80">
          <template v-slot="scope">
            <img
              :src="scope.row.avatar"
              style="width: 40px; height: 40px; border-radius: 50%"
              v-if="scope.row.avatar != ''"
            />
            <div
              style="
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #c0c4cc;
                margin: 0 auto;
              "
              v-else
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码" width="168">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="168">
          <template v-slot="scope">
            <el-tag v-if="scope.row.gender == 0">未知</el-tag>
            <el-tag v-if="scope.row.gender == 1">男</el-tag>
            <el-tag v-if="scope.row.gender == 2">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="answer" label="生日" width="168">
        </el-table-column>
        <el-table-column prop="userLevel" label="用户等级" width="168">
          <template v-slot="scope">
            <el-tag v-if="scope.row.userLevel == 0">普通用户</el-tag>
            <el-tag v-if="scope.row.userLevel == 1">VIP用户</el-tag>
            <el-tag v-if="scope.row.userLevel == 2">高级VIP</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="168">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status == 0">可用</el-tag>
            <el-tag v-if="scope.row.status == 1">禁用</el-tag>
            <el-tag v-if="scope.row.status == 2">注销</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" v-slot="scope">
          <el-button type="primary" size="small" @click="scopel(scope.row)"
            >详情</el-button
          >
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page="ruleForm.page"
        @size="setSize"
        @current="setCurrent"
        style="margin-top: 30px; padding: 32px 16px"
      ></pagination>

      <!-- 模态框 -->
      <el-dialog
        title="用户编辑"
        :visible.sync="dialogVisible"
        width="48%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleFormbox"
          ref="ruleFormbox"
          label-width="90px"
          class="demo-ruleForm"
          :label-position="labelPosition"
          style="margin-left: 50px"
        >
          <el-row>
            <el-col :span="13">
              <el-form-item label="用户名" prop="username">
                <el-input
                  v-model="ruleFormbox.username"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="用户昵称" prop="nickname">
                <el-input v-model="ruleFormbox.nickname"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="13">
              <el-form-item label="用户手机" prop="mobile">
                <el-input v-model="ruleFormbox.mobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="用户性别" prop="gender">
            <el-select v-model="ruleFormbox.gender" placeholder="请选择">
              <el-option label="未知" :value="0"> </el-option>
              <el-option label="男" :value="1"> </el-option>
              <el-option label="女" :value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户等级" prop="userLevel">
            <el-select v-model="ruleFormbox.userLevel" placeholder="请选择">
              <el-option label="普通用户" :value="0"> </el-option>
              <el-option label="VIP用户" :value="1"> </el-option>
              <el-option label="高级VIP" :value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="ruleFormbox.status" placeholder="请选择">
              <el-option label="可用" :value="0"> </el-option>
              <el-option label="禁用" :value="1"> </el-option
              ><el-option label="注销" :value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="OK(ruleFormbox.row)">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import { fetchList, updateUser } from "@/api/user";
import pagination from "../pagination.vue";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      value: "",
      input: "",
      total: 0,
      dialogVisible: false,
      labelPosition: "left",
      form: {
        name: "",
      },
      tableData: [],
      ruleForm: {
        addTime: "",
        gender: 0,
        mobile: null,
        nickname: null,
        status: 0,
        userLevel: 0,
        deleted: false,
        id: null,
        question: "",
        updateTime: "",
        page: 1,
        limit: 20,
        total: 0,
      },
      ruleFormbox: {
        username: "",
        nickname: "",
        mobile: "",
        gender: null,
        userLevel: null,
        status: null,
      },
    };
  },
  // 注册分页标签
  components: {
    pagination,
  },
  mounted() {
    this.getfetchList();
    this.find();
  },
  methods: {
    // 渲染列表
    getfetchList() {
      fetchList(this.ruleForm).then((res) => {
        console.log(res, "耶");
        if (res.data.errno == 0) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    // 查找
    find() {
      this.getfetchList();
    },
    // 分页
    setSize(val) {
      console.log(`${val}`, "条数");
      this.ruleForm.page = 1;
      this.ruleForm.limit = val;
      this.getfetchList();
    },

    setCurrent(val) {
      console.log(`${val}`, "当前页");
      this.ruleForm.page = val;
      this.getfetchList();
    },
    // 导出
    handleDownload() {
      let demo = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let obje = {
          用户名: this.tableData[i].username,
          手机号码: this.tableData[i].mobile,
          性别: this.tableData[i].gender,
          生日: this.tableData[i].answer,
          状态: this.tableData[i].status,
        };
        demo.push(obje);
      }
      console.log(demo);
      const worksheet = XLSX.utils.json_to_sheet(demo); //这里面传入要导出的表格数据
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "data"); //data为自定义表格名字
      XLSX.writeFile(workbook, "用户信息.xlsx"); //one.xlsx指的是文件名
    },
    // 编辑
    handleClose(done) {
      done();
    },
    // 编辑
    scopel(val) {
      console.log(val);
      this.dialogVisible = true;
      this.ruleFormbox.gender = val.gender;
      this.ruleFormbox.id = val.id;
      this.ruleFormbox.userLevel = val.userLevel;
      this.ruleFormbox.username = val.username;
      this.ruleFormbox.status = val.status;
      this.ruleFormbox.mobile = val.mobile;
      this.ruleFormbox.nickname = val.nickname;
    },
    // 编辑确定
    OK() {
      updateUser(this.ruleFormbox).then((res) => {
        if (res.data.errno == 0) {
          this.$message({
            type: "success",
            message: "修改成功",
          })
          this.dialogVisible = false;
          this.getfetchList();
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
/* 表格文字居中 */
::v-deep .cell {
  text-align: center;
}
</style>